<template>
  <v-container fill-height text-center align-center class="d-flex justify-center">
    <v-card
      class="elevation-16">
      <v-toolbar color="primary" dark flat>
        <v-toolbar-title>找回密码</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn color="info" @click="goToLogin">去登陆</v-btn>
      </v-toolbar>
      <v-card-text  style="padding: 5vh 5vw;">
        <v-stepper v-model="e1" style="width: 50vw; max-width: 600px">
          <v-stepper-header>
            <v-stepper-step :complete="e1 > 1" step="1" @click="e1 = 1">身份验证</v-stepper-step>
            <v-divider></v-divider>
            <v-stepper-step :complete="e1 > 2" step="2">密码重置</v-stepper-step>
            <v-divider></v-divider>
            <v-stepper-step step="3">重置完成</v-stepper-step>
          </v-stepper-header>
          <v-stepper-items>
            <v-stepper-content step="1">
              <v-form ref="form1" @submit.prevent="validateBeforeSubmit">
                <v-text-field
                    v-model="email"
                    label="邮箱"
                    required
                    prepend-icon="mdi-email"
                    :rules="emailRules"
                ></v-text-field>
                <v-btn color="primary" type="submit">发送验证码</v-btn>
              </v-form>
            </v-stepper-content>
            <v-stepper-content step="2">
              <v-form ref="form2" @submit.prevent="resetPassword">
                <v-text-field
                    v-model="code"
                    label="验证码"
                    required
                    prepend-icon="mdi-shield-check"
                    :rules="codeRules"
                ></v-text-field>
                <v-text-field
                    v-model="newPassword"
                    label="新密码"
                    :type="showPassword ? 'text' : 'password'"
                    required
                    prepend-icon="mdi-lock"
                    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                    :rules="passwordRules"
                    @click:append="toggleShowPassword"
                ></v-text-field>
                <v-text-field
                    v-model="confirmPassword"
                    label="确认新密码"
                    :type="showConfirmPassword ? 'text' : 'password'"
                    required
                    prepend-icon="mdi-lock"
                    :append-icon="showConfirmPassword ? 'mdi-eye' : 'mdi-eye-off'"
                    :rules="confirmPasswordRule"
                    @click:append="toggleShowConfirmPassword"
                ></v-text-field>
                <v-btn color="primary" type="submit">重置密码</v-btn>
              </v-form>
            </v-stepper-content>
            <v-stepper-content step="3">
              密码重置成功，请使用新密码登录。
              <v-btn color="primary" @click="goToLogin">登录</v-btn>
            </v-stepper-content>
          </v-stepper-items>
        </v-stepper>
      </v-card-text>
      <v-card-actions>

      </v-card-actions>
    </v-card>
  </v-container>
</template>

<script>
// import axios from "axios";

export default {
  data: () => ({
    e1: 1,
    email: '',
    code: '',
    newPassword: '',
    showPassword: false,
    confirmPassword: '',
    showConfirmPassword: false,
    isGettingCode: false,
    emailRules: [
      (v) => !!v || '邮箱不能为空',
      (v) => /.+@.+\..+/.test(v) || '邮箱格式不正确',
    ],
    codeRules: [
      (v) => !!v || '验证码不能为空',
      (v) => v.length === 6 || '验证码长度必须为6位',
    ],
    passwordRules: [
      (v) => !!v || '密码不能为空',
      (v) => (v && v.length >= 6) || '密码长度至少为6位',
    ],
    timeLeft: 0,
  }),
  computed: {
    emailIsValid() {
      // 检查邮箱是否有效
      return this.$refs.form1.validate();
    },
    confirmPasswordRule() {
      return [
        (v) => !!v || '请确认密码',
        () => (this.confirmPassword === this.newPassword) || '密码不匹配',
      ];
    },
  },
  methods: {
    validateBeforeSubmit() {
      // 验证邮箱并发送验证码的逻辑
      if (!this.emailIsValid) return;
      // axios.post(`${this.$serverUrl}/api/doRegister/getVerificationCode`, {
      //   "email": this.email
      // }).then(response => {
      //   // console.log(response)
      //   if (response.data === "success") this.setSnackBarTrue("验证码发送成功，有效时间10分钟");
      //   else this.setSnackBarFalse("发送失败，请检查网络设置")
      // }).catch(error => {
      //   // console.log(error)
      //   if (error) this.setSnackBarFalse("发送失败，请检查网络设置")
      // })
      this.e1 = 2;
    },
    resetPassword() {
      // 验证验证码并重置密码的逻辑
      if (this.newPassword !== this.confirmPassword) {
        alert('两次输入的密码不一致');
        return;
      }
      this.e1 = 3;
    },
    goToLogin() {
      this.$router.push('/')
    },
    toggleShowPassword() {
      this.showPassword = !this.showPassword
    },
    toggleShowConfirmPassword() {
      this.showConfirmPassword = !this.showConfirmPassword
    },
  }
};
</script>
